<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="format-detection" content="telephone=no, email=no" />
	<title>购物车</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />	
	<link type="text/css" rel="stylesheet" href="css/style.css" />
	<script type="text/javascript" src="js/zepto.min.js"></script>
	<script type="text/javascript" src="js/fun.js"></script>
	<script type="text/javascript">
		$(function(){
			
			$('.storepro .select').live('tap',function(){
				if (!$(this).hasClass('on')) {
					$(this).addClass('on');
				}else{
					$(this).removeClass('on');
				}
			});

			$('.storeedit .select').live('tap',function(){
				if(!$(this).hasClass('on')){
					$(this).addClass('on');
					$(this).parent().siblings('.storepro').find('.select').addClass('on');
				}else{
					$(this).removeClass('on');
					$(this).parent().siblings('.storepro').find('.select').removeClass('on');
				}
			});

			$('.allchoose').tap(function(){
				if (!$(this).hasClass('on')) {
					$(this).addClass('on');
					$('.select').addClass('on');
				}else{
					$(this).removeClass('on');
					$('.select').removeClass('on');
				}
			});

			$('a.minus').live('tap',function(){
				var num = parseInt($(this).next().val());
				num--;
				if(num>1){
					$(this).next().val(num);
					$(this).next().next().removeClass('off');					
				}else{
					$(this).next().val(1);
					$(this).addClass('off');
				}
			});

			$('a.plus').live('tap',function(){
				var num = parseInt($(this).prev().val());
				var stock = 10; //库存
				num++;
				if(num<stock){
					$(this).prev().val(num);
					$(this).prev().prev().removeClass('off');
				}else{
					$(this).prev().val(stock);
					$(this).addClass('off');
				}
			});

			$('.storeedit .edit').live('tap',function(){
				var select = $(this).parent().siblings('.storepro').find('.select');				
				if(!select.hasClass('on')){
					alert('请选择要编辑的项！');
				}else{
					if(!$(this).hasClass('on')){
						$(this).addClass('on').text('完成');
						select.each(function(index, el) {
							if($(this).hasClass('on')){
								$(this).next().find('.handle').show();
							}
						});
					}else{
						$(this).removeClass('on').text('编辑');
						select.next().find('.handle').hide();
					}
				}
			});

			$('.delete').live('tap', function(event) {
				$(this).parents('.storepro').remove();
			});
			
		});
	</script>
</head>
<body>
	<div class="shopCart">
		<div class="storegrid">
			<div class="storeedit">
				<div class="select"></div>
				<div class="time">2015-03-10 10:02:11</div>
				<div class="edit">编辑</div>
			</div>
			<div class="storepro">
				<div class="select"></div>
				<div class="productInfo">
					<div class="productInfo_img">
						<a href=""><img src="images/p1_03.jpg" alt=""></a>
					</div>
					<div class="productInfo_desc">
						<div class="title"><a href="">飘柔焗油护理洗发素二合一 150ml</a></div>
						<div class="price"><i>￥</i>67.00</div>
						<div class="desc">可用红包支付￥1.50 <span class="number">X2</span></div>
					</div>
					<div class="storepro_edit handle">
						<div class="cartnum">
							<a href="javascript:;" class="minus off"></a>
							<input type="text" name="" id="" value="1">
							<a href="javascript:;" class="plus"></a>
						</div>
					</div>
					<div class="delete handle">删 除</div>
				</div>
				<div class="productTotal">
					<span class="total">1150人购买</span>
					<a href="" class="link">微信比价/产品详情</a>
				</div>
			</div>
			<div class="storepro">
				<div class="select"></div>
				<div class="productInfo">
					<div class="productInfo_img">
						<a href=""><img src="images/p1_03.jpg" alt=""></a>
					</div>
					<div class="productInfo_desc">
						<div class="title"><a href="">舒肤佳消毒肥皂</a></div>
						<div class="price"><i>￥</i>150.05</div>
						<div class="desc">可用红包支付￥9.02 <span class="number">X1</span></div>
					</div>
					<div class="storepro_edit handle">
						<div class="cartnum">
							<a href="javascript:;" class="minus off"></a>
							<input type="text" name="" id="" value="1">
							<a href="javascript:;" class="plus"></a>
						</div>
					</div>
					<div class="delete handle">删 除</div>
				</div>
				<div class="productTotal">
					<span class="total">1150人购买</span>
					<a href="" class="link">微信比价/产品详情</a>
				</div>
			</div>
		</div>
		<div class="storegrid">
			<div class="storeedit">
				<div class="select"></div>
				<div class="time">2015-01-22 12:00:50</div>
				<div class="edit">编辑</div>
			</div>
			<div class="storepro">
				<div class="select"></div>
				<div class="productInfo">
					<div class="productInfo_img">
						<a href=""><img src="images/p1_03.jpg" alt=""></a>
					</div>
					<div class="productInfo_desc">
						<div class="title"><a href="">强生婴儿牛奶沐浴乳150ml赠送樱花草</a></div>
						<div class="price"><i>￥</i>58.75</div>
						<div class="desc">可用红包支付￥24.55 <span class="number">X1</span></div>
					</div>
					<div class="storepro_edit handle">
						<div class="cartnum">
							<a href="javascript:;" class="minus off"></a>
							<input type="text" name="" id="" value="1">
							<a href="javascript:;" class="plus"></a>
						</div>
					</div>
					<div class="delete handle">删 除</div>
				</div>
				<div class="productTotal">
					<span class="total">1000人购买</span>
					<a href="" class="link">微信比价/产品详情</a>
				</div>
			</div>
		</div>
	</div>
	<div class="settle">
		<div class="allchoose">全选</div>
		<div class="settle_right">
			<span class="total">合计:<i>￥135.25</i></span>
			<span class="fare">邮费: ￥8.00</span>
		</div>
		<a href="" class="tobuy">结算(2)</a>
	</div>
    <ul class="footer">
    	<li><a href="index.html" class="n1">首页</a></li>
    	<li><a href="社区.html" class="n2">社区</a></li>
    	<li><a href="购物车.html" class="n3 on">购物车</a></li>
    	<li><a href="个人设置.html" class="n4">个人设置</a></li>
    </ul>
    <div id="backTop"></div>
</body>
</html>